<template>
	<view>
		<form>
			<view class="userInfo_wrapper">
				<view class="wrapper-item">
					<view class="t">
						<text>手机号码</text>
						<span class="require">*</span>
					</view>
					<view>
						<text class="phone" placeholder="请输入手机号码" >{{userInformation.phone}}</text>
					</view>
				</view>
			</view>

			<view class="userInfo_wrapper">
				<view class="wrapper-item d_s_b">
					<view class="t">
						<text>微信收款二维码</text>
						<span class="require">*</span>
					</view>
					<imageUpload :img.sync="userInformation.wxImg" ref="wxImg"></imageUpload>
					<view>
						<img src="../../static/jiankh.png" class="img_size" @click="upload('wxImg')" />

					</view>
				</view>
				<view class="wrapper-item d_s_b">
					<view class="t">
						<text>支付宝二维码</text>
						<span class="require">*</span>
					</view>
					<imageUpload :img.sync="userInformation.zfbImg" ref="zfbImg"></imageUpload>
					<view>
						<img src="../../static/jiankh.png" class="img_size" @click="upload('zfbImg')" />
					</view>
				</view>
			</view>

			<view class="userInfo_wrapper">
				<view class="wrapper-item">
					<view class="t">
						<text>交易网络链</text>
					</view>
					<view>
						<input v-model="userInformation.url" placeholder="请输入交易网络链" />
					</view>
				</view>
				<view class="wrapper-item">
					<view class="t">
						<text>USDT钱包地址</text>
					</view>
					<view>
						<input v-model="userInformation.usdtWalletImg" type="text" placeholder="请输入USDT钱包地址" />
					</view>
				</view>
				<view class="wrapper-item d_s_b">
					<view class="t">
						<text>钱包二维码</text>
					</view>
					<imageUpload :img.sync="userInformation.walletImg" ref="walletImg"></imageUpload>
					<view>
						<img src="../../static/upload.png" width="40" height="40" @click="upload('walletImg')"/>
					</view>
				</view>
			</view>

			<view class="userInfo_wrapper">
				<view class="wrapper-item">
					<view class="t">
						<text>银行名称</text>
						<span class="require">*</span>
					</view>
					<view>
						<input v-model="userInformation.bankName" type="text" placeholder="请输入银行名称" />
					</view>
				</view>
				<view class="wrapper-item">
					<view class="t">
						<text>开户行名称</text>
						<span class="require">*</span>
					</view>
					<view>
						<input v-model="userInformation.bankOpeningName" type="text" placeholder="请输入开户行名称" />
					</view>
				</view>
				<view class="wrapper-item">
					<view class="t">
						<text>银行卡号</text>
						<span class="require">*</span>
					</view>
					<view>
						<input v-model="userInformation.bankNumber" type="text" placeholder="请输入银行卡号" />
					</view>
				</view>
			</view>
			<view class="userInfo_wrapper">
				<view class="wrapper-item">
					<view class="t">
						<text>收款人姓名</text>
						<span class="require">*</span>
					</view>
					<view>
						<input v-model="userInformation.beneficiaryName" type="text" placeholder="请输入收款人姓名" />
					</view>
				</view>
			</view>
			<view class="userInfo_wrapper">
				<view class="wrapper-item d_c">
					<view>
						<text>验证码将发送至: {{userInformation.phone}}</text>
					</view>
				</view>
				<view class="wrapper-item d_r">
					<view class="t">
						<text>验证码</text>
						<span class="require">*</span>
					</view>
					<view>
						<input v-model="userInformation.verticalCode" type="text" placeholder="请输入验证码" />
					</view>
					<view class="code d_c">获取验证码</view>
				</view>
			</view>
			<button @click="clickModify" class="userInfo-qr_btn">确认修改</button>
		</form>
	</view>
</template>

<script>
	import {
		getuserInfo,
		completeUserInfo
	} from '@/request/api/userInfo.js'
	import imageUpload from '@/components/imageUpload.vue'
	export default {
		name: 'userInfo',
		components: {
			imageUpload
		},
		data() {
			return {
				userInformation: {
					id: '', //主键自增id
					userId: '', //用户id
					wxImg: '', //微信收款码二维码图片链接
					zfbImg: '', //支付宝收款码二维码图片链接
					url: '', //交易网链接
					usdtWalletImg: '', //USDT钱包地址
					walletImg: '', //钱包二维码图片链接
					bankName: '', //银行名称
					bankOpeningName: '', //开户行名称
					bankNumber: '', //银行卡号
					beneficiaryName: '', //收款人姓名
					phone: '', //手机号
					verticalCode: '', //验证码
				}
			}
		},
		methods: {
			getUserInfo() {
				getuserInfo().then((res) => {
					if (res.data) {
						this.userInformation = res.data
						this.$refs.wxImg.setUrl(this.userInformation.wxImg)
						this.$refs.zfbImg.setUrl(this.userInformation.zfbImg)
						this.$refs.walletImg.setUrl(this.userInformation.walletImg)
					}
				})

			},
			async clickModify() {
				const res = await completeUserInfo(this.userInformation)
				if (res.code == 0) {
					uni.showToast({
						title: '绑定信息成功'
					})
				}
			},
			upload(refsName) {
				this.$refs[refsName].upload()
			}

		},
		mounted() {
			this.getUserInfo()
		}
	}
</script>

<style scoped>
	.userInfo_wrapper {
		background-color: #fff;
		padding: 0 15px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
	}

	.userInfo_wrapper .wrapper-item {
		height: 49px;
		border-bottom: 1px solid #eee;
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.userInfo_wrapper .wrapper-item .t {
		width: 140px;
		font-size: 15px;
		font-weight: 400;
		color: #333;
		line-height: 23px;
	}

	.userInfo_wrapper .wrapper-item .require {
		margin-left: 2px;
		font-size: 18px;
		font-weight: 400;
		color: #fc4141;
		line-height: 27px;
	}

	.userInfo_wrapper .wrapper-item .qr-code {
		width: 100px;
		height: 100%;
		overflow: hidden;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.d_s_b {
		display: flex;
		justify-content: space-between;
	}

	.d_c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.d_r {
		display: flex;
		flex-direction: row;
	}

	.img_size {
		width: 20px;
		height: 20px;
	}

	.code {
		width: 90px;
		height: 24px;
		background: #fc4141;
		border-radius: 12px;
		font-size: 13px;
		font-weight: 400;
		color: #fff;
		line-height: 20px;
		position: absolute;
		right: 10px;
	}

	.userInfo-qr_btn {
		margin: 15px 10px;
		height: 46px;
		font-size: 18px;
		font-weight: 400;
		color: #fff;
		line-height: 27px;
		background-image: linear-gradient(90deg, #2c7fd9, #4fa1f3);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cameraImg {
		width: 50px;
		height: 50x;
		display: inline-block;
		vertical-align: top;
		border: 1px solid gray;
	}
</style>